<template>
    <div class="mod-home">
        <div class="title">
            XXX客户月度计划分解
        </div>
        <div class="left bgwhite">
            <avue-crud ref="crud1" :page="page" :data="dataList" :table-loading="dataListLoading" :option="tableOption"
                @search-change="searchChange" @row-save="rowSave" @on-load="getDataList"
                @row-click="handleCurrentRowChange" @refresh-change="refreshChange">
                <template slot="menuLeft">
                    <el-button type="primary" icon="el-icon-edit" size="small" :disabled="!selectRow.id"
                        @click.stop="initDataAuto()">初始化</el-button>
                    <el-button type="primary" icon="el-icon-edit" size="small"
                        @click.stop="openAdd()">新增月度计划</el-button>

                    <el-button type="primary" icon="el-icon-edit" size="small" @click.stop="addDialog"
                        :disabled="!selectRow.id">主管月度考核</el-button>
                    <!-- <el-button type="primary" icon="el-icon-edit" size="small"
                        @click.stop="updateDayWorkInfo">更新复盘计划</el-button> -->
                    <!-- <el-button type="danger" icon="el-icon-delete" size="small" @click.stop="openKH()">删除</el-button> -->
                </template>
                <template #radio="{ row }">
                    <el-radio v-model="selectRow" :label="row" @click.stop="">{{ }}</el-radio>
                </template>
                <template #index="{ row, $index }">
                    {{ row.$index + 1 }}
                </template>
            </avue-crud>
        </div>
        <div class="fenge"></div>
        <div class="right bgwhite">
            <el-row :gutter="10">
                <el-col :span="12">
                    <avue-crud ref="crud2" :page="page1" :data="dataPersonList" :table-loading="dataListLoading"
                        :option="tablePersonOption" @search-change="searchChange"
                        @on-load="getDataList($event, { planType: 1 })" @refresh-change="refreshChange">
                    </avue-crud>
                </el-col>
                <el-col :span="12">
                    <avue-crud ref="crud3" :page="page2" :data="dataSomeThingList" :table-loading="dataListLoading"
                        :option="tableSomeThingOption" @search-change="searchChange" @on-load="getWps"
                        @refresh-change="refreshChange">
                        <template slot-scope="scope" slot="menu">
                            <el-button type="primary" icon="el-icon-edit" size="small"
                                @click="openZD(scope.row)">复盘指导</el-button>
                        </template>
                        <template #replayDesc="{ row, }">
                           <div style="text-align: left;" v-html="formatSplitString(row.replayDesc)"></div>
                        </template>
                    </avue-crud>
                </el-col>
            </el-row>
        </div>
        <audit ref="auditRef"></audit>
        <planExamine ref="planExamine" @refreshDataList="getDataList(page)"></planExamine>
    </div>
</template>

<script>
import { tableOption } from '@/crud/manage'
import { tablePersonOption } from '@/crud/manage/person'
import { tableSomeThingOption } from '@/crud/manage/something'
import audit from '@/views/modules/manage/plan/audit.vue';
import planExamine from '@/views/templates/planExamine.vue'
export default {
    components: {
        audit,
        planExamine
    },
    data() {
        return {
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            page1: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            page2: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            dataList: [
                { month: "1月", id: 1, "sr": 10000, part: "业务一部", },
                { month: "1月", id: 2, "sr": 10000, part: "业务二部", },
                { month: "1月", id: 3, "sr": 10000, part: "业务三部", },
            ],
            dataPersonList: [

            ],
            dataSomeThingList: [
                { name: "事项1" },
                { name: "事项2" },
            ],
            dataListLoading: false,
            tableOption: tableOption,
            tablePersonOption: tablePersonOption,
            tableSomeThingOption: tableSomeThingOption,
            selectRow: {},
            cusList: [],
            deptList: [],
        }
    },
    mounted() {
        this.getCustom();
        this.getDeptUser();
    },
    methods: {
        formatSplitString(input, delimiter = ';') {
            // 处理 null 或 undefined 输入
            const str = input === null || input === undefined ? '' : String(input);

            // 分割字符串，并处理空值和前后空格
            const parts = str.split(delimiter)
                .map(part => part.trim())
                .filter(part => part !== '');

            // 格式化为 1. xxx 2. xxx 的样式
            return parts
                .map((part, index) => `${index + 1}. ${part}</br>`)
                .join(' ');
        },
        getCustom() {
            this.$http({
                url: this.$http.adornUrl('/crm/base/cust/page'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: 1,
                    size: 1000
                }, {}))
            }).then(({ data }) => {
                console.log('11:', this.tableOption);
                this.cusList = data.obj.records.map(i => {
                    return {
                        label: i.custName,
                        value: i.id
                    }
                })
                this.tableOption.column.find(i => i.prop === 'custName').dicData = this.cusList

                // cusList.push(...data.obj.records);
                // console.log('11:', cusList);
            })
        },
        getDeptUser() {
            this.$http({
                url: this.$http.adornUrl('/crm/base/emp/page'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: 1,
                    size: 100
                }, {}))
            }).then(({ data }) => {
                this.deptList = data.obj.records.map(i => {
                    return {
                        label: i.empName,
                        value: i.empNo
                    }
                })
                this.tableOption.column.find(i => i.prop === 'deptEmpName').dicData = this.deptList
            })
        },
        handleCurrentRowChange(val) {
            // console.log('val:', val);
            // if(val.id === this.selectRow.id) {
            //     this.selectRow = {}
            // } else {
            // }
            this.selectRow = val;
            // this.selectRow = val;
        },
        updateDayWorkInfo() {

        },
        addDialog() {
            if (!this.selectRow.id) {
                this.$message({
                    message: '请先选择一条数据',
                    type: 'warning',
                    duration: 1500,
                })
                return
            }
            this.$nextTick(() => {

                this.$refs.planExamine.init(this.selectRow)
            })
        },
        initDataAuto() {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/month/plan/autoPlan'),
                method: 'post',
                data: {
                    "custId": this.selectRow.custId,
                    "planYear": this.selectRow.planYear,
                    "planMonth": this.selectRow.planMonth,
                },
            }).then(({ data }) => {
                this.getDataList(this.page);
                this.getDataList(this.page1, { planType: 1 })
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        if (done) {
                            done()
                        }
                    }
                })
            }).catch(() => {
                this.dataListLoading = true
            }).finally(() => {
                this.dataListLoading = false
            })
        },
        rowSave(form, done, loading) {
            // console.log('form:', form);
            if (!form.deptName) {
                this.$message({
                    message: '部门不能为空',
                    type: 'warning',
                    duration: 1500
                })
                loading()
                return false
            }
            if (!form.custName) {
                this.$message({
                    message: '客户名称不能为空',
                    type: 'warning',
                    duration: 1500
                })
                loading()
                return false
            }
            if (!form.deptEmpName) {
                this.$message({
                    message: '负责人不能为空',
                    type: 'warning',
                    duration: 1500
                })
                loading()
                return false
            }

            if (!form.planYear) {
                this.$message({
                    message: '计划年份不能为空',
                    type: 'warning',
                    duration: 1500
                })
                loading()
                return false
            }
            if (!form.planMonth) {
                this.$message({
                    message: '计划月份不能为空',
                    type: 'warning',
                    duration: 1500
                })
                loading()
                return false
            }
            const cus = this.cusList.find(i => i.value === form.custName)
            form.custName = cus.label
            form.custId = cus.value

            const dept = this.deptList.find(i => i.value === form.deptEmpName);
            // console.log('dept:',dept);
            form.deptEmpName = dept.label
            form.deptEmpNo = dept.value

            // console.log('form:', form);
            this.$http({
                url: this.$http.adornUrl('/crm/month/plan/addPlanMonth'),
                method: 'post',
                data: this.$http.adornData({
                    ...form,

                })
            }).then(({ data }) => {
                this.getDataList(this.page);
                this.getDataList(this.page1, { planType: 1 })
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        if (done) {
                            done()
                        }
                    }
                })
            })
        },
        getWps(page, params, done) {
            console.log('page,params:', page, params);
            params = params || {}
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/crm/month/plan/pageDayWork'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page == null ? this.page2.currentPage : page.currentPage,
                    size: page == null ? this.page2.pageSize : page.pageSize
                }, params))
            }).then(({ data }) => {
                this.dataSomeThingList = data.obj.records
                this.page2.total = data.obj.total
                this.dataListLoading = false
                if (done) {
                    done()
                }
            })

        },
        getDataList(page, params, done) {
            console.log('page,params:', page, params);
            this.selectRow = {}
            params = params || {}
            this.dataListLoading = true;
            if (params.custId == null) {
                params.custId = this.$route.query.custId
            }
            this.$http({
                url: this.$http.adornUrl('/crm/month/plan/page'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params))
            }).then(({ data }) => {
                if (params?.planType == 1) {
                    this.dataPersonList = data.obj.records

                    this.page1.total = data.obj.total
                } else {
                    this.dataList = data.obj.records
                    this.page.total = data.obj.total
                }


                this.dataListLoading = false
                if (done) {
                    done()
                }
            })
        },
        // 新增 / 修改
        addOrUpdateHandle(id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },
        deleteHandle(id) {
            this.$confirm('确定进行删除操作?', '友情提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: this.$http.adornUrl('/prod/prodTag/' + id),
                    method: 'delete',
                    data: this.$http.adornData({})
                }).then(({ data }) => {
                    this.getDataList(this.page);
                    this.getDataList(this.page1, { planType: 1 })
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {

                        }
                    })
                })
            }).catch(() => { })
        },
        openAdd() {
            this.$refs.crud1.rowAdd()

        },
        openKH() {
            this.$refs.auditRef.init()
        },
        openZD(row) {
            console.log('row:', row);
            this.$prompt('请输入指导意见', '友情提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                if (!value) {
                    this.$message({
                        type: 'info',
                        message: '请输入指导意见'
                    });
                    return
                }
                this.$http({
                    url: this.$http.adornUrl('/crm/month/plan/updateDayWorkInfo'),
                    method: 'post',
                    data: this.$http.adornData({
                        id: row.id,
                        replayDesc: value
                    })
                }).then(({ data }) => {
                    this.getWps(this.page2, {})
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        /**
         * 刷新回调
         */
        refreshChange() {
            this.getDataList(this.page);
            this.getDataList(this.page1, { planType: 1 })
            this.getWps(this.page2, { planType: 1 })
        },
        searchChange(params, done) {
            this.page.currentPage = 1
            this.getDataList(this.page, params, done)
        }
    }
}
</script>

<style lang="scss" scoped>
.mod-home {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffffff;

    .left,
    .right {
        // height: 100%;
        flex: 1;
    }

    .title {
        height: 60px;
        min-height: 40px;
        width: 100%;
        color: #000000;
        font-weight: bold;
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }
}

.fenge {
    width: 100%;
    background-color: #f1f1f1;
    margin: 5px 0;
    height: 5px;
}
</style>
